<template>
  <div class="login">
    <div class="bg">
      <img src="../../assets/bg.png" alt="">
    </div>
    <!-- <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">用户登录</h3>
      <el-form-item label="账号" prop="mobile">
        <el-input type="text" placeholder="账号" v-model="form.mobile"   @keyup.enter.native="onSubmit('loginForm')" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="密码" v-model="form.password"   @keyup.enter.native="onSubmit('loginForm')"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
      </el-form-item>
    </el-form> -->
    <div class="loginBox">
      <div class="title">
        <p>小红果洗车管理系统</p>
        <p>xiaohongguo car wash management system</p>
      </div>
      <div class="loginForm">
        <div class="bold text">用户登录</div>
        <div class="text">
          <div class="textLfet"></div>
          <p>欢迎登录小红果洗车管理系统</p>
          <div class="textRight"></div>
        </div>
        <div class="user">
          <div class="img">
            <img src="../../assets/user.png" alt="">
          </div>
          <input type="text" class="input" placeholder="用户名" v-model="user">
        </div>
        <div class="user password">
          <div class="img">
            <img src="../../assets/password.png" alt="">
          </div>
          <input :type="pwdType" class="input" placeholder="密码" v-model="password">
          <div class="eye">
            <img src="../../assets/noeye.png" class="noeye"  alt="" v-show="ifDisplay" @click="ifDisplay=!ifDisplay">
            <img src="../../assets/eye.png" alt="" v-show="!ifDisplay" @click="ifDisplay=!ifDisplay,changeType()">
          </div>
        </div>
        <div class="remember">
          <el-checkbox v-model="checked">记住密码</el-checkbox>
        </div>
        <div class="loginIn" @click="onSubmit1()">登录</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Login",
    data() {
      return {
        ifDisplay:true,//眼睛的显示与隐藏
        pwdType:'password',//密码方式
        checked:true,//记住密码
        user:'',//用户
        password:''//密码
      }
    },
    methods: {
      //改变密码显示与隐藏
      changeType(){
        this.pwdType = this.pwdType === 'password' ? 'text' : 'password';
      },
      // 提交登录
      onSubmit1(){
        console.log(this.user,"用户");
        console.log(this.password,"密码");
        this.$axios.post(this.baseURL+'user/login',{
          "mobile":this.user,
          "password":this.password,
          "requestSource":"PC"
        }).then((res)=>{
          console.log(res,"登录资源");
          if(res.data.code==1){
            this.$message({
              type: 'success',
              message: '登录成功'
            });
            this.$router.push({
              path: '/',
            })
            //缓存账号
            localStorage.setItem('phoneNumber', res.data.data.phoneNumber);//将登录信息放入缓存
            localStorage.setItem('id', res.data.data.id);//将登录信息放入缓存
            // 缓存token
            if(res.data.data.token){
            	 localStorage.setItem('token', res.data.data.token);//将登录信息放入缓存
            }else{
            	 localStorage.setItem('token', res.data.data.token);//将登录信息放入缓存
            }
            console.log("写入本地的token ==> "+res.data.data.token);
          }else{
            this.$message({
              type: 'info',
              message: '登录失败'
            });
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login{
    width: 100%;
    height: 100vh;
    background-color: #f0f1f6;
    position: relative;
    overflow: hidden;
    font-family: "PingFang SC","Microsoft YaHei","微软雅黑","Microsoft JhengHei","黑体",arial,STHeiti,'\5b8b\4f53';
    .bg{
      width:100%;
      height:100%;
      img{
        width: 100%;
        height:100%;
      }
    }
    .loginBox{
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      position: absolute;
      top: 0;
      .title{
        width: 100%;
        height: 100px;
        margin:  250px auto 0;
        text-align: center;
        p{
          color: #ffffff;
          font-size: 30px;
          line-height: 50px;
        }
      }
      .loginForm{
        border-radius: 2px;
        width: 558px;
        height: 352px;
        background-color: rgba(240, 241, 246, 1);
        margin: 20px auto 0;
        padding: 20px 80px;
        box-sizing: border-box;
        .text{
          text-align: center;
          line-height: 30px;
          color: rgba(128, 128, 128, 1);
          font-size: 16px;
          white-space: nowrap;
          position: relative;
          .textLfet, .textRight{
            width: 79px;
            height: 2px;
            position: absolute;
            left: 0px;
            top: 13px;
            border-top: 2px solid rgba(42, 130, 228, 1);
          }
          .textRight{
            left: 318px;
          }
        }
        .bold{
          font-size: 18px;
          color: rgba(42, 130, 228, 1);
        }
        .user,.remember, .loginIn{
          width: 322px;
          height: 46px;
          border-radius: 3px;
          border: 1px solid rgba(42, 130, 228, 1);
          margin: 15px 28px;
          padding: 13px 10px;
          box-sizing: border-box;
          .img{
            width: 20px;
            height: 20px;
            background-color: #2a82e4;
            display: inline-block;
            text-align: center;
            padding-top: 2px;
            box-sizing: border-box;
            border-radius: 2px;
            vertical-align: middle;
          }
          .input{
            width: 275px;
            height: 20px;
            border: none;
            outline: none;
            padding-top: 2px;
            box-sizing: border-box;
            background-color: transparent;
            font-size: 12px;
            color: rgba(166, 166, 166, 1);
          }
        }
        .password{
          .input{
            width: 250px;
          }
          .eye{
            width: 20px;
            height: 20px;
            display: inline-block;
            vertical-align: middle;
            overflow: hidden;
            padding-top: 0px;
            cursor: pointer;
            img{
              width: 100%;
            }
            .noeye{
              padding-top: 2px;
            }
          }
        }
        .remember{
          border: none;
          text-align: right;
        }
        .loginIn{
          background-color: rgba(42, 130, 228, 1);
          color: #ffffff;
          text-align: center;
          cursor: pointer;
        }
      }
    }
    /* .login-box {
      border: 1px solid #DCDFE6;
      background-color: #Ffffff;
      width: 450px;
      margin: 0 auto;
      padding: 35px 35px 15px 35px;
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      box-shadow: 0 0 25px #909399;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -210px;
      margin-top: -200px;
      .login-title {
        text-align: center;
        margin: 0 auto 40px auto;
        color: #303133;
      }
    } */
  }

</style>
